<template>
  <div class="marketing">
    <div class="marketing-item active1" @click="goUrl('leadTracker')">
      <div class="marketing-item-left">
        <div class="marketing-item-left1">营销台账</div>
        <div class="marketing-item-left2">日常营销工作记录</div>
      </div>
      <div class="marketing-item-right bac1">立即前往</div>
    </div>
    <div class="marketing-item active2" @click="goUrl('campaignCounter')">
      <div class="marketing-item-left">
        <div class="marketing-item-left1">营销统计</div>
        <div class="marketing-item-left2">日常营销工作统计</div>
      </div>
      <div class="marketing-item-right bac2">立即前往</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "marketing",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {};
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {},
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    goUrl(url) {
      this.$router.push({
        name: url,
      });
    },
  }, // all the methods should be put here in the last
};
</script>
<style scoped lang="scss">
.marketing {
  overflow: hidden;
}
.active1 {
  background-image: url("~img/marketingExtension/list_4.png");
}
.active2 {
  background-image: url("~img/marketingExtension/list_1.png");
}
.marketing-item {
  margin: 2px 4px;
  height: 105px;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 22.5px;
  // border: 1px solid red;
  .marketing-item-left1 {
    font-size: 16px;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    color: #000000;
  }
  .marketing-item-left2 {
    margin-top: 6px;
    font-size: 12px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #4b4b4b;
  }
  .marketing-item-right {
    height: 27px;
    border-radius: 14px;
    font-size: 13px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 15px;
    &.bac1 {
      background: #d7b363;
    }
    &.bac2 {
      background: #93acd8;
    }
  }
}
</style>
